<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>特殊资产预警列表</span>
      </div>
    </template>
    <el-table
      :data="data"
      style="width: 100%"
      height="calc(100% - 0px)"
      :header-cell-style="{
        background: '#F5F7FA',
        color: '#606266',
        fontWeight: 500,
      }"
    >
      <el-table-column prop="address" label="资产地址" show-overflow-tooltip />
      <el-table-column prop="rentCount" label="资产面积" width="120">
        <template #default="scope"> {{ scope.row.rentCount }}㎡ </template>
      </el-table-column>
      <el-table-column prop="warningType" label="预警类型" width="180">
        <template #default="scope">
          <div class="warning-types">
            <template v-if="scope.row.warningType">
              <el-tag
                v-for="(type, idx) in getWarningTypes(scope.row.warningType)"
                :key="idx"
                :type="getWarningTypeTag(type)"
                size="small"
                class="warning-tag"
              >
                {{ type }}
              </el-tag>
            </template>
            <span v-else class="no-warning">无预警</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
const props = defineProps({
  data: {
    type: Array,
    required: true,
    default: () => [],
  },
});

// 根据预警类型返回不同的标签类型
const getWarningTypeTag = (type) => {
  const typeMap = {
    租金比对预警: "info", // 蓝色
    合同合规预警: "success", // 绿色
    空置监测预警: "warning", // 橙色
    无合同: "danger", // 红色
    // 兼容旧数据
    租金价格: "info",
    合同合规: "success",
    空置: "warning",
  };
  return typeMap[type] || "info";
};

// 分割多条预警类型
const getWarningTypes = (warningType) => {
  if (!warningType) return [];
  return warningType.split(";").map((type) => type.trim());
};
</script>

<style lang="scss" scoped>
.box-card {
  height: 100%;
  border: none;
  :deep(.el-card__body) {
    height: calc(100% - 55px);
    padding: 10px 20px !important;
  }
  :deep(.el-card__header) {
    padding: 15px 20px;
    border-bottom: 1px solid #ebeef5;
  }
}
.card-header {
  font-weight: 500;
  font-size: 16px;
  color: #303133;
}

:deep(.el-table) {
  // 设置表格行的悬浮效果
  .el-table__row:hover {
    cursor: pointer;
    background-color: #f5f7fa !important;
  }

  // 调整标签的样式
  .el-tag {
    border-radius: 2px;
  }
}

.warning-types {
  display: flex;
  flex-wrap: wrap;
}

.warning-tag {
  margin-right: 5px;
  margin-bottom: 5px;
}

.warning-tag.info {
  background: #409eff !important; // 蓝色
  color: #fff !important;
  border: none;
}
.warning-tag.success {
  background: #67c23a !important; // 绿色
  color: #fff !important;
  border: none;
}
.warning-tag.warning {
  background: #e6a23c !important; // 橙色
  color: #fff !important;
  border: none;
}
.warning-tag.danger {
  background: #f56c6c !important; // 红色
  color: #fff !important;
  border: none;
}
.no-warning {
  color: #999;
  font-size: 13px;
}
</style>
